<template>
  <view class="share-view">
    <view class="share-header">
      <text class="share-title">分享至</text>
      <image class="share-close" src="/static/share/share-close.png" @tap="closeShare"></image>
    </view>
    
    <view class="share-content">
      <view class="share-item" @tap="shareToFriend">
        <image class="share-icon" src="/static/share/wx_friend.png" mode="aspectFit"></image>
        <text class="share-text">发送给朋友</text>
      </view>
      
      <view class="share-item" @tap="shareToTimeline">
        <image class="share-icon" src="/static/share/wx_circle.png" mode="aspectFit"></image>
        <text class="share-text">分享到朋友圈</text>
      </view>
      
      <view class="share-item" @tap="saveImage">
        <image class="share-icon" src="/static/share/save_image.png" mode="aspectFit"></image>
        <text class="share-text">保存图片</text>
      </view>
      
      <view class="share-item" @tap="copyLink">
        <image class="share-icon" src="/static/share/copy_link.png" mode="aspectFit"></image>
        <text class="share-text">复制链接</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ShareView',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {
    // 关闭分享弹窗
    closeShare() {
      this.$emit('close');
    },
    
    // 发送给朋友
    shareToFriend() {
      // 实现发送给朋友的逻辑
      console.log('发送给朋友');
      // 可以根据传入的data参数进行相应操作
    },
    
    // 分享到朋友圈
    shareToTimeline() {
      // 实现分享到朋友圈的逻辑
      console.log('分享到朋友圈');
    },
    
    // 保存图片
    saveImage() {
      // 实现保存图片的逻辑
      console.log('保存图片');
    },
    
    // 复制链接
    copyLink() {
      // 实现复制链接的逻辑
      console.log('复制链接');
    }
  }
}
</script>

<style scoped lang="scss">
  .share-view {
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding-bottom: 30rpx;
  }
  
  .share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .share-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .share-close {
    width: 36rpx;
    height: 36rpx;
    background-image: url('/static/guanbi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .share-content {
    display: flex;
    padding: 40rpx 20rpx;
  }
  
  .share-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .share-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 16rpx;
  }
  
  .share-text {
    font-size: 28rpx;
    color: #666;
  }
</style>